import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import Bg from "../../../asset/images/bgs.png";
import Success from "../../../asset/images/success.png";
import './orderDetailNext.scss';

class OrderDetail extends Taro.Component {
    config = {
        navigationStyle:'custom',
        enablePullDownRefresh: true
    };

    state = {
        dataWrap: [],
    };

    componentDidMount() {
        this.init(); //获取订单详情
    }

    init = () => {
        const option = this.$router.params;
        console.log(option)
        if (option.type == 1) { //教室
            const params = {
                url: '/wx/order/detail',
                data:{
                    orderId: option.id
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataWrap: res.data
                            })
                        }
                    }
                }
            })
        } else { //教练
            const params = {
                url: '/wx/order/detail',
                data:{
                    orderId: option.id
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        if (res && res.data) {
                            this.setState({
                                dataWrap: res.data
                            })
                        }
                    }
                }
            })
        }
    };

    returnPage = () => {
        Taro.navigateBack({
            delta: 1
        })
    };

    render() {
        const {dataWrap} = this.state;
        return (
            <View className="page">
                <View className="arrow-return" onClick={this.returnPage}>
                    <View className="return-icon"></View>
                </View>
                <View className="detail-top-bg"></View>
                <View className="detail-content-wrap">
                    <Image src={Bg} className="content-bg-img"></Image>
                    <View className="content-title-wrap">
                        <View className="content-top flex-center">
                            <Image src={Success} className="content-img"/>
                            <View>{dataWrap.orderState == 0 ? '未付款' : dataWrap.orderState == 1 ? '付款中' : dataWrap.orderState == 2 ? '交易成功' : '已退款'}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">课程名称</View>
                            <View>{dataWrap.className}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">课程时间</View>
                            <View>{dataWrap.classBeginTime+'-'+dataWrap.classEndTime}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">教室名称</View>
                            <View>{dataWrap.roomName}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">地点</View>
                            <View>{dataWrap.address}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">规模</View>
                            <View>{dataWrap.reservedInfo}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">教练</View>
                            <View>{dataWrap.coachInfo.coachName}</View>
                        </View>
                        <View className="content-list  content-list-next flex-lr">
                            <View className="name">类型</View>
                            <View>{dataWrap.classTypeName}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">订单号</View>
                            <View>{dataWrap.outTradeNo}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">订单时间</View>
                            <View>{dataWrap.classDate}</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">总价</View>
                            <View className="blod">{dataWrap.chargeTotal}元</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">折扣</View>
                            <View className="blod">{dataWrap.discount}元</View>
                        </View>
                        <View className="content-list flex-lr">
                            <View className="name">实付金额</View>
                            <View className="blod">{dataWrap.factAcceptCharge}元</View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(OrderDetail);



